Change variable containing url in Laravel blade

So I have a page that has an iframe. In my database I have stored 3 different urls, which are url, url2 and url3. What happens is when I open the page, the iframe works this way:

<iframe src="{{$episode->url}}"></iframe>

Now I have 3 buttons below, which is basically url1 url2 url3. As seen by the code, url1 is opening by default. What I want is if select url2, the src of the iframe changes to:

<iframe src="{{$episode->url2}}"></iframe>

and if I chose url3, it changes to:

<iframe src="{{$episode->url3}}"></iframe>

without having to load another page with a different route. It should also be noted that url2 and url3 are optional, and would sometimes be empty, or lets say only url1 and url2 have url. Is this possible, or should I create a different page for each url to play on.
I am ready to use javascript, but it should be noted that I have 0 experience in it.
Edit:
Here is my complete blade view because it was asked for:

@extends('layouts.app')

@section('title', '{{$episode->name}}')

@section('content')

<header>
    <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active">
        <img class="d-block w-100" src="/storage/images/episodes/{{$episode->image}}" alt="First slide">
        </div>
    </div>
    </div>
</header>

<div class="row pb-5">
    <div class="col-md-9">
        <div class="card">
            <div class="card-body">
                <h1 class="card-title">
                    {{$episode->name}}
                </h1>
                <div class="embed-responsive embed-responsive-16by9">
                    <iframe class="embed-responsive-item" src="{{$episode->url}}"></iframe>
                </div>
                <p class="pt-3">
                    <button class="btn btn-primary btn-sm">Server 1</button>
                    <button class="btn btn-primary btn-sm">Server 2</button>
                    <button class="btn btn-primary btn-sm">Server 3</button>
                </p>
                <p class="subtitle">
                    {{$episode->about}}
                </p>
            </div>
        </div>
    </div>
</div>

@endsection